<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio :disabled="$route.params.id > 0" :label="1">目录</el-radio>
          <el-radio :disabled="$route.params.id > 0" :label="2">菜单</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="ruleForm.type === 2" label="上级" prop="pid">
        <el-select v-model="ruleForm.pid">
          <el-option label="顶级目录" :value="0"></el-option>
          <el-option
          v-for="(item,index) in menuList"
          :key="index"
          :label="item.title"
          :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="title" label="标题">
        <el-input placeholder="请输入标题" v-model="ruleForm.title">
        </el-input>
      </el-form-item>
      <el-form-item v-show="ruleForm.type === 1" prop="icon" label="图标">
        <el-input placeholder="请输入图标" v-model="ruleForm.icon">
        </el-input>
      </el-form-item>
      <el-form-item v-show="ruleForm.type === 2" prop="url" label="地址">
        <el-input placeholder="请输入地址" v-model="ruleForm.url"> </el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button v-if="$route.params.id" type="primary" class="btn1" @click="submitForm">立即修改</el-button>
        <el-button v-else type="warning" class="btn1" @click="submitForm">立即添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        pid: 0,
        title: "",
        icon: "",
        type: 1,
        url: "",
        status: 1,
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
      // 下拉菜单中的数据
      menuList: []
    };
  },
  created(){
    // 获取下拉菜单中的数据
    this.getMenuList();
    if(this.$route.params.id) {
      // 有id说明是修改，没有就是添加
      this.getInfoById(this.$route.params.id)
    }
  },
  methods: {
    // 下拉菜单
    getMenuList() {
      this.$http.get('/menulist?istree=1')
      .then(res => {
        this.menuList = res.list;
      })
      .catch(err => {
        console.log(err);
      })
    },
    // 修改-获取当前数据，回显在页面上
    getInfoById(id) {
      // this.$http.get('/menuinfo?id='+id)
      this.$http.get('/menuinfo', {params: {id: id}})
      .then(res=>{
        this.ruleForm = res.list
      })
    },
    // 提交表单
    submitForm() {
      // this.$refs.ruleForm  选择表单，目的是为了校验表单
      // validate  element自带的方法，用来校验
      this.$refs.ruleForm.validate((valid) => {
        // valid为真时表示校验否过
        if (valid) {
          var url = '';
          if(this.$route.params.id) {
            // 有id，是修改
            url = '/menuedit';
            this.ruleForm.id = this.$route.params.id;
          }else {
            // 新增
            url = '/menuadd';
          }
          this.$http.post(url, this.ruleForm)
            .then(res => {
              if(res.code === 200) {
                this.$router.back()
              }
            })
            .catch(err => {
              console.log(err);
            })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>